<template>
  <div class="box detailBox">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      @click-right="showShare = true"
      class="nav1"
      ref="nav1"
    >
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      @click-right="showShare = true"
      class="nav2"
      ref="nav2"
    >
      <template #title>
        <ul>
          <li v-for="item in 4" :key="item" @click="goTo(item)">{{item+1}}楼</li>
        </ul>
      </template>
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="cont" @scroll="onScroll" ref="cont">
      <van-swipe class="my-swipe" indicator-color="white" @change="onChange" ref="mySwipe">
        <van-swipe-item v-for="item in proImgs" :key="item.id" @click="onImgProView">
          <van-image
            width="100vw"
            height="4rem"
            fit="cover"
            :src="item.img"
          />
        </van-swipe-item>
      </van-swipe>
      <div class="info">
        <h2>商品名称：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
      <div class="info">
        <h2>商品名称：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
      <div class="info">
        <h2 ref="two">二楼：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
      <div class="info">
        <h2>商品名称：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
      <div class="info">
        <h2 ref="three">三楼：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
      <div class="info">
        <h2>{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
      <div class="info">
        <h2 ref="four">四楼：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="n" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
    </van-goods-action>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Swipe, SwipeItem, GoodsAction, GoodsActionIcon, GoodsActionButton, Image as VanImage, ImagePreview, Toast, ShareSheet } from 'vant'
import { getDetail, addCart, getCart } from '@/request/index.js'
import myMixin from '@/mixin/index.js'

Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(VanImage)
Vue.use(Toast)
Vue.use(ShareSheet)

export default {
  name: 'Detail',
  props: ['qwe'],
  mixins: [myMixin],
  data () {
    return {
      showShare: false,
      proInfo: {},
      proImgs: [{
        id: 1,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg'
      }, {
        id: 2,
        img: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=a587b23df11f3a295a9dddcaac159007/500fd9f9d72a60590cfef2f92934349b023bba62.jpg'
      }],
      index: 0,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      n: 0
    }
  },
  mounted () {
    this.getCartSum()
    // console.log('params', this.$route.params.qwe)
    // console.log('query', this.$route.query.id)
    // 请求商品详情信息
    console.log(this.qwe)
    getDetail({
      id: this.qwe
    }).then(data => {
      this.proInfo = data.data.data
      // 将图片单独处理,用于渲染商品图
      this.proImgs.unshift({
        id: 0,
        img: data.data.data.proImg
      })
    })
  },
  methods: {
    getCartSum () {
      getCart().then(data => {
        // this.$store.commit('cart/change_cartList', data.data.data.proData)
        this.change_cartList(data.data.data.proData)
        this.n = this.$store.getters.sum
      })
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
    onImgProView (e) {
      const that = this
      // 点击商品图时的放大
      // 处理图片放大组件需要用的数据
      const arr = []
      this.proImgs.forEach(val => {
        arr.push(val.img)
      })
      // 调用图片放大功能
      ImagePreview({
        images: arr, // 传入图片数据
        startPosition: this.index, // 设置默认索引
        onChange (i) { // 添加改变图片时的方法
          // 调用轮播图的滑动到指定位置方法,将放大图片的索引传入
          // 放大图的滑动同步到轮播图
          that.$refs.mySwipe.swipeTo(i)
        }
      })
    },
    onChange (i) {
      // 轮播图改变时,将索引保存,用于设置放大图的初始位置
      this.index = i
    },
    addCart () {
      // this.$router.push('/login')
      // 获取到当前商品详情
      const obj = this.proInfo
      // 添加购物车需要的数量和是否选中属性
      obj.num = 1
      obj.flag = 1
      // 调用添加购物车数据接口
      addCart({
        proData: JSON.stringify(obj)
      }).then(data => {
        // console.log(data.data)
        if (data.data.code === 0) {
          Toast('商品已售完')
        } else {
          Toast('添加购物车成功')
          this.getCartSum()
        }
      })
    },
    onScroll (e) {
      document.querySelector('.nav2').style.opacity = e.target.scrollTop / 100
    },
    goTo (i) {
      switch (i) {
        case 1:
          this.$refs.cont.scrollTop = 0
          break
        case 2:
          this.$refs.cont.scrollTop = this.$refs.two.offsetTop - 46
          break
        case 3:
          this.$refs.cont.scrollTop = this.$refs.three.offsetTop - 46
          break
        case 4:
          this.$refs.cont.scrollTop = this.$refs.four.offsetTop - 46
          break
      }
    }
  }
}
</script>

<style lang="scss">
.detailBox{
  .van-nav-bar{
    position: absolute;
    width: 100vw;
  }
  .van-hairline--bottom::after{
    border-bottom-width: 0px;
  }
  .nav1{
    background: none;
    .van-nav-bar__left{
      background: #ccc;
      border-radius:50%;
      display: flex;
      justify-content: center;
      width: 46px;
      padding: 0;
    }
    .van-nav-bar__right{
      background: #ccc;
      border-radius:50%;
      display: flex;
      justify-content: center;
      width: 46px;
      padding: 0;
    }
  }
  .nav2{
    opacity: 0;
    .van-nav-bar__title{
      max-width: auto;
      width:70%;
      ul{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
          flex: 1
        }
      }
    }
  }
}
.cont{
  flex: 1;
  overflow: auto;
  padding-bottom: 0.6rem;
  .info{
    p{
      font-size: 20px;
    }
    span{
      font-size: 40px;
      color: red;
    }
  }
}
</style>
